import { Meta, Canvas } from '@storybook/addon-docs';

<Meta title="Design system/Badges" />

# Badges

# Badges

## Neutral Badges

We have a number of neutral badges which can be uses as indicators.

`tracking-wide` is used on the text is to help with readability with the smaller display text.

<Canvas>
  <div class="flex items-center mb-lg">
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-gray-100 text-gray-800">
      Label
    </span>
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-indigo-100 text-indigo-800">
      Label
    </span>
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-blue-100 text-blue-800">
      Label
    </span>
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-purple-100 text-purple-800">
      Label
    </span>
  </div>
</Canvas>

## Positive & Negative Indicators

The green and red badges should be

<Canvas>
  <div class="flex items-center">
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-green-100 text-green-800">
      Positive
    </span>
    <span class="flex items-center mr-sm px-sm py-0.5 rounded-full text-sm tracking-wide font-semibold bg-red-100 text-red-800">
      Negative
    </span>
  </div>
</Canvas>
